@import "../../../style/index.less";

@toggle-bg-color: @color_grey;
@no-related-data-font-color: @color_font_700;
@timeline-bg-hover-color: @color_info_100;
@title-bg-color: @color_grey;
@timespot-color: @color_disabled_400;
@content-bottom-color: @color_grey;

@icon-color: @color_font_400;
@icon-action-hover-color: @color_info;
@icon-delete-hover-color: @color_delete;

.halo-com-related-snapshot {
  .no-related-data {
    margin-top: 20px;
    color: @no-related-data-font-color;
  }
  .timeline {
    margin-top: 20px;
    .per-line {
      height: 41px;
      display: flex;
      &:first-child {
        .time-spot-box .time-line:before {
          display: none;
        }
      }
      &:last-child {
        .time-spot-box .time-line:after {
          display: none;
        }
      }
      &:hover {
        .content {
          background-color: @timeline-bg-hover-color;
        }
      }
      .title {
        border-radius: 2px;
        padding: 0 16px;
        flex: 1;
        width: 115px;
        min-width: 115px;
        max-width: 115px;
        height: 28px;
        line-height: 28px;
        background-color: @title-bg-color;
        position: relative;
        margin-top: 6px;
        display: inline-block;
        text-align: right;
        &:after {
          content: "";
          position: absolute;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 5px solid @title-bg-color;
          right: -9px;
          top: 50%;
          width: 5px;
          height: 0;
          margin-top: -5px;
        }
      }
      .time-spot-box {
        position: relative;
        display: inline-block;
        flex: 1;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        .time-spot {
          width: 50px;
          display: inline-block;
          border: 1px solid @timespot-color;
          background-color: white;
          border-radius: 15px;
          width: 15px;
          height: 15px;
          position: absolute;
          top: 50%;
          margin-top: -10px;
          right: 20px;
          z-index: 2;
          &:before {
            content: "";
            width: 11px;
            height: 11px;
            border-radius: 11px;
            background-color: @timespot-color;
            display: block;
            position: absolute;
            left: 2px;
            top: 2px;
          }
        }
        .time-line {
          &:before {
            content: "";
            width: 1px;
            height: 17px;
            background-color: @timespot-color;
            position: absolute;
            top: 0;
            right: 28.5px;
          }
          &:after {
            content: "";
            width: 1px;
            height: 17px;
            background-color: @timespot-color;
            position: absolute;
            top: 24px;
            right: 28.5px;
          }
        }
      }
      .content {
        flex: 1;
        overflow: hidden;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid @content-bottom-color;
        display: flex;
        div {
          flex: 1;
          padding: 0 10px;
          box-sizing: border-box;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &.name {
            flex: 2;
            i {
              margin-right: 4px;
            }
          }
          &.size {
            flex: 2;
          }
          &.time {
            flex: 4;
          }
          &.status {
            flex: 2;
          }
          &.icon-set {
            flex: 1;
            i {
              font-size: 14px;
              margin-right: 10px;
              color: @icon-color;
              cursor: pointer;
              &.create {
                &:hover {
                  color: @icon-action-hover-color;
                }
              }
              &.delete {
                &:hover {
                  color: @icon-delete-hover-color;
                }
              }
            }
          }
        }
      }
    }
  }
}
